<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>计算器</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
            font-family: Arial, sans-serif;
            background: #feeeed;
        }
        .calculator {
            width: 300px;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-gap: 10px;
            position: relative;
        }
        .calculator input[type="button"] {
            width: 100%;
            padding: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .calculator input[type="button"]:hover{
            background: #D3D3D3;
            transform: scale(0.9);
            transition-duration: 0.3s;
        }
        .calculator input[type="text"] {
            padding: 10px;
            border: 1px black solid;
            border-radius: 5px;
            text-align: right;
            font-size: 20px;
            grid-column: 1 / 4;
            background: #FAEBD7;
        }
        #c{
            grid-column:4;
            grid-row:1 / 3;
            background-color: #f8aba6;
        }
        #s1{
            position: absolute;
            top: 32px;
            left: 22px;
        }
        #s2{
            position: absolute;
            top: 88px;
            left: 22px;
        }
        span{
            font-size: 10px;
            color: #74787c;
        }
        .num{
            background: #afdfe4;
        }
        .d{
            background: #ffce7b;
            font-size: 20px;
        }
        .fu{
            background: #ffce7b;
        }
        p{
            font-family: "幼圆";
            font-size: 30px;
        }
    </style>
</head>



<body>
    <p>前程计算器</p>
    <form action="http://localhost:5000/calculator" method="post" name="jsq">
    <div class="calculator">
        <span id="s1">算式</span>
        <span id="s2">结果</span>
            <input type="text" id="view" name="view" readonly value={{view}}>
            <input type="text" id="result" readonly value={{result}}>
            <input type="button" value="C" id="c" onclick="clearResult()">
            <input type="button" value="7" class="num" onclick="appendNumber('7')">
            <input type="button" value="8" class="num" onclick="appendNumber('8')">
            <input type="button" value="9" class="num" onclick="appendNumber('9')">
            <input type="button" value="/" class="fu" onclick="appendOperator('/')">
            <input type="button" value="4" class="num" onclick="appendNumber('4')">
            <input type="button" value="5" class="num" onclick="appendNumber('5')">
            <input type="button" value="6" class="num" onclick="appendNumber('6')">
            <input type="button" value="*" class="fu" onclick="appendOperator('*')">
            <input type="button" value="1" class="num" onclick="appendNumber('1')">
            <input type="button" value="2" class="num" onclick="appendNumber('2')">
            <input type="button" value="3" class="num" onclick="appendNumber('3')">
            <input type="button" value="+" class="fu" onclick="appendOperator('+')">
            <input type="button" value="0" class="num" onclick="appendNumber('0')">
            <input type="button" value="." class="d" style="padding: 0" onclick="appendNumber('.')">
            <input type="button" value="=" onclick="calculateResult()" style="background-color: #f8aba6;">
            <input type="button" value="-" class="fu" onclick="appendOperator('-')">

    </div>
</form>
    <script>
        function appendNumber(number) {
            document.getElementById('view').value += number;
        }

        function appendOperator(operator) {
            document.getElementById('view').value += operator;
        }

        function clearResult(){
            document.jsq.action="http://localhost:5000/calculator/clear"
            document.jsq.submit()
        }
        function calculateResult(){
            document.jsq.action="http://localhost:5000/calculator/result"
            document.jsq.submit()
        }
        // function clearResult() {
        //     document.getElementById('result').value = '';
        //     document.getElementById('view').value = '';
        // }

        // function calculate() {
        //     var result = eval(document.getElementById('view').value);
        //     document.getElementById('result').value = result;
        // }
    </script>

{% if flog=="error" %}
        <script >
            alert("算式不正确，请重新输入！");
        </script>
{% endif %}
</body>
</html>
